import React, { Component } from "react";
import { Button, Select, Table } from "antd";
import "./index.less";
const { Option } = Select;

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: record => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name
  })
};
function handleChange(value) {
  console.log(`selected ${value}`);
}

export default class ManagerHome extends Component {
  editorRole = () => {
    this.props.history.push("/staffmanager/add");
  };
  columns = [
    {
      title: "账号",
      dataIndex: "name",
      render: text => <a>{text}</a>
    },
    {
      title: "员工姓名",
      dataIndex: "age"
    },
    {
      title: "联系方式",
      // dataIndex: "address"
      render: data => <div>{data.address}</div>
    },
    {
      title: "角色",
      render: data => {
        return data.mainRole === 0 ? (
          <span className="those-responsible">
            <div className="main">主账号</div>
            <div className="role">责任人</div>
          </span>
        ) : (
          <span className="those-responsible">
            <div className="main">子账号</div>
          </span>
        );
      }
    },
    {
      title: "添加人",
      dataIndex: "age"
    },
    {
      title: "添加时间",
      dataIndex: "age"
    },
    {
      title: "操作",
      align: "right",
      render: data => {
        return data.mainRole === 0 ? (
          <span className="setting-responsible">
            <div>当前账号</div>
          </span>
        ) : (
          <span className="setting-responsible">
            <div>子账号</div>
            <div className="use">
              <span>停用</span>
              <span
                className="editor"
                onClick={() => {
                  this.editorRole();
                  console.log(this);
                }}
              >
                编辑
              </span>
              <span>移除</span>
            </div>
          </span>
        );
      }
    }
  ];
  data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      mainRole: 0
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      mainRole: 1
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      mainRole: 1
    },
    {
      key: "4",
      name: "Disabled User",
      age: 99,
      address: "Sidney No. 1 Lake Park",
      mainRole: 1
    }
  ];
  render() {
    return (
      <div className="manager-home">
        <div>
          <Button type="primary">添加员工</Button>
        </div>
        <div className="select">
          <span>角色：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 170 }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
          <span className="spca">状态：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 170 }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
          <span className="spca">员工账号：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 170 }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
          <div className="filter">
            <Button type="primary">筛选</Button>
            <span className="conditions">清空筛选条件</span>
          </div>
        </div>
        <div className="filter-table">
          <Table
            rowSelection={this.rowSelection}
            columns={this.columns}
            dataSource={this.data}
            // bordered
          />
          <Button>停用</Button>
          <Button>启用</Button>
        </div>
      </div>
    );
  }
}
